import { Meta, Canvas } from '@storybook/addon-docs';

<Meta title="Design system/Navigation/Breadcrumbs" />

<Canvas>
  <div class="flex items-center space-x-xs bg-legacybg">
    <div class="cursor-pointer flex items-center text-sm text-gray-400 hover:text-muted">
      <svg
        class="w-5 fill-current mr-xs"
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
      >
        <path d="M20 17V7c0-2.168-3.663-4-8-4S4 4.832 4 7v10c0 2.168 3.663 4 8 4s8-1.832 8-4zM12 5c3.691 0 5.931 1.507 6 1.994C17.931 7.493 15.691 9 12 9S6.069 7.493 6 7.006C6.069 6.507 8.309 5 12 5zM6 9.607C7.479 10.454 9.637 11 12 11s4.521-.546 6-1.393v2.387c-.069.499-2.309 2.006-6 2.006s-5.931-1.507-6-2V9.607zM6 17v-2.393C7.479 15.454 9.637 16 12 16s4.521-.546 6-1.393v2.387c-.069.499-2.309 2.006-6 2.006s-5.931-1.507-6-2z"></path>
      </svg>
      <span class="">myDatabase</span>
    </div>
    <svg
      class="text-gray-400 w-5 fill-current"
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
    >
      <path d="M10.707 17.707 16.414 12l-5.707-5.707-1.414 1.414L13.586 12l-4.293 4.293z"></path>
    </svg>
    <div class="cursor-pointer flex items-center text-sm text-gray-400 hover:text-muted">
      <svg
        class="w-5 fill-current mr-xs"
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
      >
        <path d="M20 5h-8.586L9.707 3.293A.997.997 0 0 0 9 3H4c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2h16c1.103 0 2-.897 2-2V7c0-1.103-.897-2-2-2zM4 19V7h16l.002 12H4z"></path>
      </svg>
      <span class="">public</span>
    </div>
    <svg
      class="text-gray-400 w-5 fill-current"
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
    >
      <path d="M10.707 17.707 16.414 12l-5.707-5.707-1.414 1.414L13.586 12l-4.293 4.293z"></path>
    </svg>
    <div class="cursor-pointer flex items-center text-sm text-muted">
      <svg
        class="w-5 fill-current mr-xs"
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
      >
        <path d="M4 21h15.893c1.103 0 2-.897 2-2V5c0-1.103-.897-2-2-2H4c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2zm0-2v-5h4v5H4zM14 7v5h-4V7h4zM8 7v5H4V7h4zm2 12v-5h4v5h-4zm6 0v-5h3.894v5H16zm3.893-7H16V7h3.893v5z"></path>
      </svg>
      <span class="">public</span>
    </div>
  </div>
</Canvas>

# Breadcrumbs

## What are breadcrumbs?

Breadcrumbs are navigation options found directly above the header text.

Breadcrumbs are useful for un-packing nested navigations - anywhere where the user views an expanded page and drills further in for more information.
